<template>
  <div class="page-setting">
    <div class="crumbs">
      <router-link to="/">首页</router-link>/
      <span>系统设置</span> /
      <span class="active">更新记录</span>
    </div>
    <el-container :style="{ height: mainH + 'px' }" v-loading="loading">
      <el-main class="census-main">
        <div class="opers flex v-c">
          <el-form :inline="true" class="filter-blk flex-1">
            <el-form-item label="内容">
              <el-input placeholder="请输入内容" v-model.trim="filterForm.content"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getData">
                <i class="iconfont icon-search"></i> 查询
              </el-button>
            </el-form-item>
          </el-form>
          <!-- <el-button type="blue" @click="addDepartmentAction"><i class="iconfont icon-add"></i> 新增部门</el-button> -->
          <el-button type="blue" @click="addAccountAction" v-if="!type">
            <i class="iconfont icon-add"></i> 新增
          </el-button>
        </div>
        <div class="content mb-10" v-for="item in dataList" :key="item.id" @click="editAction(item)">
          <div class="flex">
            <div style="color:#61dcef">v{{ item.version }}</div>
            <div class="ml-30">{{ item.time }}</div>
          </div>
          <div class="mt-5" v-if="item.content.length > 0">【新增】
            <div v-for="(sitem, sindex) in item.content" :key="sindex">{{ sitem }}</div>
          </div>
          <div class="mt-5" v-if="item.optimizeContent.length > 0">【优化】
            <div v-for="(sitem, sindex) in item.optimizeContent" :key="sindex">{{ sitem }}</div>
          </div>

          <div class="mt-5" v-if="item.repairContent.length > 0">【修复】
            <div v-for="(sitem, sindex) in item.repairContent" :key="sindex">{{ sitem }}</div>
          </div>

        </div>
        <!-- <el-table :data="dataList" style="width: 100%" v-loading="loading">
          <el-table-column type="index" label="序号" width="120"></el-table-column>
          <el-table-column prop="version" label="版本号" width="120"></el-table-column>
          <el-table-column prop="content" label="内容"></el-table-column>
          <el-table-column prop="time" label="更新时间" width="300"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <div class="nowrap">
                <el-button type="primary" @click="editAction(scope.row)">编辑</el-button>
              </div>
            </template>
</el-table-column>
</el-table> -->
        <el-pagination v-if="total > 0" class="text-right mt-20 mr-20" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next, total, jumper"
          :total="total"></el-pagination>
        <el-dialog v-if="newAccountModalVisible" :title="newAccountModalTitle" :visible.sync="newAccountModalVisible"
          width="660px" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close center>
          <el-form ref="newForm" :model="form" :label-width="100 + 'px'">
            <div class="flex">
              <el-form-item label="版本号：" prop="version" :rules="[
                { required: true, message: '请输入版本号', trigger: 'change' },
                { validator: validateVersion, trigger: 'change' }]">
                <el-input placeholder="请输入版本号" v-model="form.version"></el-input>
              </el-form-item>
              <el-form-item label="更新时间">
                <el-date-picker v-model="form.time" type="datetime" placeholder="请选择" format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss" />
              </el-form-item>
            </div>

            <el-form-item label="新增：" prop="content">
              <el-input type="textarea" :rows="5" placeholder="请输入" v-model="form.content"></el-input>
            </el-form-item>
            <el-form-item label="优化：" prop="optimizeContent">
              <el-input type="textarea" :rows="5" placeholder="请输入" v-model="form.optimizeContent"></el-input>
            </el-form-item>
            <el-form-item label="修复：" prop="repairContent">
              <el-input type="textarea" :rows="5" placeholder="请输入" v-model="form.repairContent"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="newAccountModalVisible = false">取消</el-button>
            <el-button type="primary" :loading="saving" @click="saveAction">保存</el-button>
          </span>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "HandleSetting",
  props: {
    winH: {
      type: Number,
      default: 500
    }
  },
  data() {
    return {
      loading: false,
      saving: false,
      form: {},
      tableData: [],
      filterForm: {},
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dataList: [],
      newAccountModalVisible: false,
      newAccountModalTitle: "",
      type: this.$route.query.type
    };
  },
  watch: {},
  computed: {
    mainH() {
      return this.winH - 219;
    },
    ...mapState(["siteInfos"]),
    isAdmin() {
      return this.siteInfos && this.siteInfos.userType == 1;
    }
  },
  methods: {
    editAction(row) {
     if(this.type==1)  return
      this.newAccountModalVisible = true;
      this.newAccountModalTitle = "编辑";
      this.form = Object.assign({}, { ...row, content: row.content.join('\n'), optimizeContent: row.optimizeContent.join('\n'), repairContent: row.repairContent.join('\n') });
    },
    addAccountAction() {
      this.form = {};
      this.newAccountModalVisible = true;
      this.newAccountModalTitle = "新增";
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getData(page);
    },
    getData() {
      let params = Object.assign(
        {
          page: this.currentPage,
          limit: this.pageSize
        },
        this.filterForm
      );
      this.$get("/systemsetup/systemsetup/renewInfoListPage", params).then(
        res => {
          this.dataList = res.data.records.map(item => {
            return {
              ...item,
              content: item.content ? item.content.split('\\n') : [],
              optimizeContent: item.optimizeContent ? item.optimizeContent.split('\\n') : [],
              repairContent: item.repairContent ? item.repairContent.split('\\n') : []
            }
          });
          this.total = res.data.total;

        },
        err => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    validateVersion(rule, value, callback) {
      const reg = /^\d+(?:\.\d+){2}$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确的版本号"));
      } else {
        callback();
      }
    },
    saveAction() {
      this.$refs["newForm"].validate(valid => {
        if (valid) {
          this.saving = true;
          this.$post(
            "/systemsetup/systemsetup/renewInfoAddOrUpdate",
            this.form
          ).then(
            res => {
              this.saving = false;
              this.newAccountModalVisible = false;
              this.$message.success("保存成功,刷新页面后生效！");
              window.eventBus.$emit('setFeaturesData')
              this.getData();
            },
            err => {
              this.saving = false;
              if (err.msg) {
                this.$message.error(err.msg);
              }
            }
          );
        }
      });
    }
  },
  created() {
    this.getData(1);
  },
  activated() { },
  mounted() { }
};
</script>
<style lang="less" scoped>
.content {
  background: #034699;
  padding: 15px;
  border-radius: 5px;
}
</style>